<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <div class="panel-title">主动报工追溯码详情</div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <tr>
                        <th width="150">追溯码：</th>
                        <td>{$trace.trace_code}</td>
                        <th width="150">订单号：</th>
                        <td>{$trace.order_no}</td>
                    </tr>
                    <tr>
                        <th>客户名称：</th>
                        <td>{$trace.customer_name}</td>
                        <th>产品名称：</th>
                        <td>{$trace.product_name}</td>
                    </tr>
                    <tr>
                        <th>产品型号：</th>
                        <td>{$trace.model_name} ({$trace.model_code})</td>
                        <th>工序：</th>
                        <td>{$trace.process_name}</td>
                    </tr>
                    <tr>
                        <th>员工姓名：</th>
                        <td>{$trace.worker_name}</td>
                        <th>审核员：</th>
                        <td>{$trace.auditor_name}</td>
                    </tr>
                    <tr>
                        <th>生产数量：</th>
                        <td>{$trace.quantity} 件</td>
                        <th>工作时长：</th>
                        <td>{$trace.work_hours} 小时</td>
                    </tr>
                    <tr>
                        <th>总工资：</th>
                        <td>¥{$trace.total_wage}</td>
                        <th>审核时间：</th>
                        <td>{:date('Y-m-d H:i:s', $trace.report_audit_time)}</td>
                    </tr>
                    <tr>
                        <th>产品编号：</th>
                        <td colspan="3">
                            {if condition="$trace.item_nos_array"}
                                {volist name="trace.item_nos_array" id="item_no"}
                                    <span class="label label-info">{$item_no}</span>
                                {/volist}
                            {else/}
                                <span class="text-muted">无</span>
                            {/if}
                        </td>
                    </tr>
                    <tr>
                        <th>备注：</th>
                        <td colspan="3">{$trace.remark|default='无'}</td>
                    </tr>
                </table>
            </div>
        </div>

        {if condition="$trace.item_media"}
        <div class="row">
            <div class="col-md-12">
                <h4>产品编号完工图片</h4>
                {volist name="trace.item_media" id="item"}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h5>产品编号：{$item.item_no}</h5>
                    </div>
                    <div class="panel-body">
                        {if condition="$item.audit_images"}
                        <div class="row">
                            {volist name="item.audit_images" id="image"}
                            <div class="col-md-3 col-sm-4 col-xs-6">
                                <div class="thumbnail">
                                    <img src="{$image.image_url}" alt="完工图片" style="width: 100%; height: 150px; object-fit: cover;" onclick="showImage('{$image.image_url}')">
                                    <div class="caption">
                                        <small class="text-muted">{:date('Y-m-d H:i:s', $image.createtime)}</small>
                                    </div>
                                </div>
                            </div>
                            {/volist}
                        </div>
                        {else/}
                        <p class="text-muted">暂无图片</p>
                        {/if}
                        
                        {if condition="$item.audit_videos"}
                        <div class="row">
                            {volist name="item.audit_videos" id="video"}
                            <div class="col-md-3 col-sm-4 col-xs-6">
                                <div class="thumbnail">
                                    <video controls style="width: 100%; height: 150px;">
                                        <source src="{$video.image_url}" type="video/mp4">
                                        您的浏览器不支持视频播放。
                                    </video>
                                    <div class="caption">
                                        <small class="text-muted">{:date('Y-m-d H:i:s', $video.createtime)}</small>
                                    </div>
                                </div>
                            </div>
                            {/volist}
                        </div>
                        {/if}
                    </div>
                </div>
                {/volist}
            </div>
        </div>
        {/if}

        {if condition="$trace.report_images"}
        <div class="row">
            <div class="col-md-12">
                <h4>员工上传的完工图片</h4>
                <div class="row">
                    {volist name="trace.report_images" id="image"}
                    <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="thumbnail">
                            <img src="{$image.image_url}" alt="完工图片" style="width: 100%; height: 150px; object-fit: cover;" onclick="showImage('{$image.image_url}')">
                            <div class="caption">
                                <small class="text-muted">{:date('Y-m-d H:i:s', $image.createtime)}</small>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>
        {/if}
    </div>
</div>

<!-- 图片预览模态框 -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">图片预览</h4>
            </div>
            <div class="modal-body text-center">
                <img id="previewImage" src="" style="max-width: 100%; max-height: 500px;">
            </div>
        </div>
    </div>
</div>

<script>
function showImage(url) {
    $('#previewImage').attr('src', url);
    $('#imageModal').modal('show');
}
</script>
